<template>
  <q-layout
    view="hHh lpR fFf"
    style="max-height: 100vh;height: 100vh; overflow: hidden;"
  >
    <q-bar dense class="q-electron-drag shadow-1">
      <q-img style="width:60px;height: 20px" src="static/pngs/logo-title.png"></q-img>
      <q-space />
      <q-btn
        dense
        flat
        class="bar-btn"
        icon="mdi-window-minimize"
        text-color="dark"
        @click="minimize"
      />
      <q-btn
        class="bar-btn-red"
        dense
        flat
        icon="mdi-close"
        text-color="dark"
        @click="close"
      />
    </q-bar>
    <q-page-container>
      <router-view />
    </q-page-container>
  </q-layout>
</template>
<script lang="ts">
import { Vue, Component } from 'vue-property-decorator';
const electron = require('electron');
@Component({})
export default class LoginLayout extends Vue {
  minimize() {
    if (process.env.MODE === 'electron') {
      electron.remote.getCurrentWindow().minimize();
    }
  }

  close() {
    if (process.env.MODE === 'electron') {
      electron.remote.app.exit();
    }
  }
}
</script>
<style lang="stylus" scoped>
.bar-btn:hover {
  color: white !important;
}

.bar-btn-red:hover {
  color: $negative !important;
}
</style>
